<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{margin: 0 auto;background:#ccc;position: relative;}
        .box{padding: 6px;float: left;}
        .imgbox{padding: 6px;border: solid 1px black;border-radius: 6px;}
        .imgbox img{width: 200px;}
    </style>
    <script>
        onload = function(){
            new WaterfallFlow();
        }

        class WaterfallFlow{
            constructor(){
                this.cont = document.querySelector(".cont");
                this.box = document.querySelectorAll(".cont .box");
                this.init();
                this.firstLine();
                this.otherLine();
            }
            init(){
                this.maxNum = parseInt(document.documentElement.clientWidth / this.box[0].offsetWidth);
                this.cont.style.width = this.maxNum * this.box[0].offsetWidth + "px";
            }
            firstLine(){
                this.heightArr = [];
                for(let i=0;i<this.maxNum;i++){
                    this.heightArr.push(this.box[i].offsetHeight);
                }
            }
            otherLine(){
                for(let i=this.maxNum;i<this.box.length;i++){
                    this.box[i].style.position = "absolute";
                    // console.log(Math.min(...this.heightArr));
                    // console.log(Math.min.apply(null, this.heightArr));
                    // console.log(this.heightArr.slice(0).sort(function(a,b){
                    //     return a-b;
                    // })[0])
                    const min = Math.min(...this.heightArr);
                    const minIndex = this.heightArr.indexOf(min);
                    this.box[i].style.top = min + "px";
                    this.box[i].style.left = minIndex * this.box[0].offsetWidth + "px";
                    this.heightArr[minIndex] += this.box[i].offsetHeight;
                }
            }
        }

    </script>
</head>
<body>
    <div class="cont">
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/m2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/l2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/m2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/l2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/m2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/l2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/m2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/l2.jpg" alt="">
            </div>
        </div>
    </div>
</body>
</html>